<!--
 * @Author: MrDotYan 2564217790@qq.com
 * @Date: 2024-09-27 16:35:51
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-27 18:18:08
 * @FilePath: /midway-admin/webServerAdmin/src/views/files/pdf/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pdf table-box">
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card body-style="height:calc(100% - 180px)">
          <template #header>
            <Title title="文件上传"></Title>
          </template>
          <el-scrollbar>
            <div style="height: 100%">
              <UploadFile v-model:fileList="fileList" :file-type="pdfMime"></UploadFile>
            </div>
          </el-scrollbar>
          <template #footer>
            <div class="footer-btn">
              <el-button type="primary" @click="merge" :disabled="!isNotEmpty(fileList)">合并PDF</el-button>
              <el-button type="success" @click="download" :disabled="!isNotEmpty(mergePaths)">下载</el-button>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :span="16">
        <ProTable ref="proTableRef" :columns :request-api="fetchMergePdfList">
          <template #tableHeader>历史</template>
        </ProTable>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="tsx">
import UploadFile from "@/components/Upload/Files.vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import Title from "@/components/Title/index.vue";
import { ref } from "vue";
import { mergePdfFiles, fetchMergePdfList } from "@/api/modules/files";
import { isNotEmpty } from "@/utils/isHelper";
import { ElMessage } from "element-plus";
import { useFile } from "@/hooks/useFile";

const proTableRef = ref<ProTableInstance>();
const fileList = ref();

function save(fileName) {
  const name = fileName.split("-");
  const exportFile = document.createElement("a");
  exportFile.style.display = "none";
  exportFile.download = name[name.length - 1];
  exportFile.href = fileName;
  document.body.appendChild(exportFile);
  exportFile.click();
  // 去除下载对 url 的影响
  document.body.removeChild(exportFile);
}

function view(link) {
  window.open(link);
}

const pdfMime = ["application/pdf", "application/x-pdf"];
const columns: Array<ColumnProps> = [
  { type: "index", label: "序号", fixed: "left", width: "80px" },
  { prop: "diffTime", label: "处理耗时" },
  {
    prop: "path",
    label: "文件路径",
    render: ({ row }) => (
      <>
        <el-button type="primary" link onClick={() => save(useFile(row.path))}>
          保存
        </el-button>
        <el-button link onClick={() => view(useFile(row.path))}>
          预览
        </el-button>
      </>
    )
  }
];
const mergePaths = ref();

function download() {
  const name = mergePaths.value.split("-");
  const exportFile = document.createElement("a");
  exportFile.style.display = "none";
  exportFile.download = name[name.length - 1];
  exportFile.href = mergePaths.value;
  document.body.appendChild(exportFile);
  exportFile.click();
  // 去除下载对 url 的影响
  document.body.removeChild(exportFile);
}

function merge() {
  if (!isNotEmpty(fileList.value)) {
    ElMessage.warning("请选择需要合并的文件");
    return;
  }
  const ids = fileList.value.map(item => item.id);
  mergePdfFiles({ ids }).then(r => {
    const { code, message, data } = r;
    if (code === 200) {
      mergePaths.value = useFile(data.path);
      ElMessage.success("合并成功！");
    } else {
      ElMessage.error(message);
    }
  });
}
</script>

<style lang="scss" scoped>
.pdf {
  height: 100%;
  &:deep(.el-row) {
    height: 100%;
    .el-col {
      height: 100%;
      .el-card {
        height: 100%;
        box-sizing: border-box;
      }

      .footer-btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>
